<template>
  <view class="wrapper">
    <view class="title no-border"> 日常监测</view>
    <view class="content">
      <view class="filter-btn" > 
        <block v-for="(item, index) in menus" :key="index">
          <view class="filter-btn-item" @click="switchTab(item.value)" :class="{'filter-btn-active':currentTab===item.value}">{{item.text}}</view>
        </block>
      </view>
      <view v-show="currentTab==='temperCharts'">
        <!-- 如果tab切换的父容器使用了v-show来控制显示，组件上需绑定reshow属性用于强制重新渲染图表。如组件父元素没有v-show，则不必传此参数。-->
        <view class="charts-title">
          单位：℃
        </view>
        <view class="charts-box">
          <qiun-data-charts type="area"
            canvasId="scrolllineid"
            background="#FFFFFF"
            :opts="temperOpts"
            :chartData="chartsDataTemper"
            :ontouch="true"
            :canvas2d="true"
            :reshow="currentTab==='temperCharts'"
          />
        </view>
      </view>
      <view v-show="currentTab==='pressureCharts'">
        <view class="charts-title">
          单位：毫摩/升
        </view>
        <view class="charts-box">
            <qiun-data-charts type="area"
              :opts="pressureOpts"
              background="#FFFFFF"
              :ontouch="true"
              :canvas2d="true"
              canvasId="bloodpressure"
              :chartData="chartsDataPressure"
              :reshow="currentTab==='pressureCharts'"
            />
        </view>
      </view>
      <!-- ECharts如果父元素用了v-if，因renderjs与逻辑层通信不同步，可能会导致初始化时监听不到prop变化，不能成功初始化，虽然组件内使用延时200ms的方法返回逻辑层强制重新读取数据，但这不是正确的解决问题的办法，并且父元素使用了 v-if 会导致组件重新加载，造成资源浪费，强烈建议将v-if改成v-show！！！ -->
      <view v-if="currentTab==='sugarCharts'">
        <view class="charts-title">
          单位：mmHg
        </view>
        <view class="charts-box">
          <qiun-data-charts type="area"
            :opts="sugarOpts"
            background="#FFFFFF"
            :ontouch="true"
            :canvas2d="true"
            canvasId="bloodsugar"
            :chartData="chartsDatasugar"
            :reshow="currentTab==='sugarCharts'"
          />
        </view>
      </view>
    </view>
    <view class="basic-info">
      <view class="title"> 历史健康</view>
      <view class="basic-info-content" v-for="(item,index) in dataList" :key="index">
        <view class="info-time">{{item.gcsj ? item.gcsj : ''}}</view>
        <view class="form-item-box">
          <view class="label">体温</view>
          <view class="item-value">{{item.tw ? item.tw : ''}}</view>
        </view>
        <view class="form-item-box">
          <view class="label">心率（次/分）</view>
          <view class="item-value">{{item.heartRate ? item.heartRate : ''}}</view>
        </view>
        <view class="form-item-box">
          <view class="label">血糖</view>
          <view class="item-value">{{item.xt ? item.xt : ''}}</view>
        </view>
        <view class="form-item-box">
          <view class="label">血压</view>
          <view class="item-value">{{(item.xygy && item.xydy) ? parseFloat(item.xygy) + '/' + parseFloat(item.xydy) : ''}}</view>
        </view>
        <view class="form-item-box">
          <view class="label">中药医疗</view>
          <view class="item-value">{{item.zyzl == 1 ? '是' : '否'}}</view>
        </view>
        <view class="form-item-box">
          <view class="label">核酸采样</view>
          <view class="item-value">{{item.hsjg == 1 ? '是' : '否'}}</view>
        </view>
        <view class="form-item-box">
          <view class="label">采样方式</view>
          <view class="item-value">{{checkWaysType(item.cyfs)}}</view>
        </view>
        <view class="form-item-box">
          <view class="label">采样时间</view>
          <view class="item-value">{{item.cysj ? item.cysj : ''}}</view>
        </view>
        <view class="form-item-box">
          <view class="label">症状</view>
          <view class="item-value">{{item.yjzz | oneLevelType}} {{item.ejzz | twoLevelType}} {{item.qtzz ? item.qtzz : ''}}</view>
        </view>
        <view class="form-item-box">
          <view class="label" style="min-width:140rpx">医学建议</view>
          <view class="item-value">{{item.yxjy || ''}}</view>
        </view>
        <view class="form-item-box">
          <view class="label" style="min-width:140rpx">巡诊意见</view>
          <view class="item-value">{{item.xzyj || ''}}</view>
        </view>
        <view class="form-item-box">
          <view class="label" style="min-width:140rpx">备注</view>
          <view class="item-value">{{item.bz || ''}}</view>
        </view>
      </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mildSymptoms, severeSymptoms } from "@/data";
import { getDailyReportList } from "@/api";
import moment from "moment";

export default {
  data() {
    return {
      chartsDataTemper:{},
      chartsDataPressure:{},
      chartsDatasugar:{},
      checkWays:[],
      // 体温区域图配置参数
      temperOpts:{
        enableScroll:true,
        enableMarkLine:true,
        color: ['#FF8B7C'],
        legend:{show:false},
        xAxis:{scrollShow:true,itemCount:4,disableGrid:true},
        yAxis:{
          splitNumber: 6,
          axisLine: false, 
          data: [
            {
              type: "value",
              position: "left",
              disabled: false,
              axisLine: false,
              axisLineColor: "#CCCCCC",
              calibration: false,
              fontColor: "#666666",
              fontSize: 13,
              textAlign: "right",
              title: "",
              titleFontSize: 13,
              titleOffsetY: 0,
              titleOffsetX: 0,
              titleFontColor: "#666666",
              min: 35,
              max: 41,
              tofix: null,
              unit: "",
              format: ""
            }
          ]
        },
        axisLine: {onZero: true},
        extra:{
          markLine:{type:'dash',data:[{value:37.3,color:'#FF8B7C',label:true,labelBgColor:'#ff8b7c',labelAlign:'right',labelBgOpacity:'0.2'}]},
          area:{type:'curve',addLine:true,gradient:true}
        }
      },
      // 血压区域图配置参数
      pressureOpts:{
        enableScroll:true,
        color: ['#FFC259','#2C9AF1'],
        legend:{show:false},
        xAxis:{scrollShow:true,itemCount:4,disableGrid:true},
        extra:{
          area:{type:'curve',addLine:true,gradient:true}
        }
      },
      // 血糖区域图配置参数
      sugarOpts:{
        enableScroll:true,
        color: ['#2C9AF1'],
        legend:{show:false},
        xAxis:{scrollShow:true,itemCount:4,disableGrid:true},
        extra:{
          area:{type:'curve',addLine:true,gradient:true}
        }
      },
      menus:[
        {text:"体温",value:"temperCharts"},
        {text:"血压",value:"pressureCharts"},
        {text:"血糖",value:"sugarCharts"}
      ],
      currentTab: 'temperCharts',
      isolateId: '', // 'a64b12a466eb70ad4db0e8a812bcedd3'
      dataList: [],
    };
  },
  filters: { 
    oneLevelType(value) {
      if (value && value.length > 0) {
        let symptoms = [];
        mildSymptoms.forEach((item) => {
          if (value.split(',').includes(item.value)) {
            symptoms.push(item.text);
          }
        });
        return symptoms.join(' ');
      } else {
        return '';
      }
    },
    twoLevelType(value) {
      if (value && value.length > 0) {
        let symptoms = [];
        severeSymptoms.forEach((item) => {
          if (value.includes(item.value)) {
            symptoms.push(item.text);
          }
        });
        return symptoms.join(' ');
      } else {
        return '';
      }
    },
    // checkWaysType(value) {
    //   debugger
    //   const typeObj = this.checkWays.find(obj => obj.label === label);
    //   return typeObj ? typeObj.label : '';
    // }
  },
  async onLoad(param) {
    console.log('param=====',param);
    this.checkWays = await this.$store.dispatch('getDic','sample_mode');
    this.isolateId = param.isolateId;
    //模拟从服务器获取数据
    this.getServerData()
  },
  methods: {
    checkWaysType(value) {
      let arr = [];
      this.checkWays.forEach(item=>{
        value.indexOf(item.value)!=-1 && arr.push(item.label)
      })
      return arr.join('、')
    },
    getServerData() {
      getDailyReportList({isolateId: this.isolateId}).then((res) => {
        console.log('res===', res);
        const categories = [];
        const temperList = [];
        const lowPressureList = [];
        const highPressureList = [];
        const sugarList = [];
        if(res) {
          this.dataList = res;
          res.forEach((item) => {
            categories.unshift(moment(item.gcsj).format('M/D HH:mm'));
            temperList.unshift(item.tw);
            lowPressureList.unshift(parseFloat(item.xydy));
            highPressureList.unshift(parseFloat(item.xygy));
            sugarList.unshift(item.xt);
          });
          const temperLine = {
            categories,
            series: [
              {name : '体温', data: temperList}
            ]
          };
          const pressureLine = {
            categories,
            series: [
              {name : '高压', data: highPressureList},
              {name : '低压', data: lowPressureList}
            ]
          };
          const sugarLine = {
            categories,
            series: [
              {name : '血糖', data: sugarList}
            ]
          };
          this.$forceUpdate();
          this.chartsDataTemper=JSON.parse(JSON.stringify(temperLine));
          this.chartsDataPressure=JSON.parse(JSON.stringify(pressureLine));
          this.chartsDatasugar=JSON.parse(JSON.stringify(sugarLine));
          setTimeout(() => {
            this.$forceUpdate();
          }, 200)
        }
      });
    },
    switchTab(tab) {
    	this.currentTab = tab
    },
  }
};
</script>

<style lang="scss">
.wrapper {
  background-color: #f9f9f9;
  .title {
    height: 98rpx;
    line-height: 98rpx;
    font-size: 40rpx;
    padding: 0 32rpx;
    background-color: #fff;
    border-bottom: 1rpx solid #e5e5e5;
  }
  .no-border{
    border: none;
  }
}
.content {
  display: flex;
  flex-direction: column;
  flex: 1;
  .filter-btn{
		display: flex;
		flex-wrap:wrap;
    background-color: #fff;
    padding: 0 32rpx;
    padding-top: 10rpx;
  	justify-content: flex-start;
		&-item{
			flex-basis: 126rpx;
			padding-bottom: 20rpx;
			text-align: center;
      margin-right: 60rpx;
		}
		&-active{
      color: #2C9AF1;
      border-bottom:3px solid #2C9AF1;
    }
  }
  .charts-title{
    font-size: 26rpx;
    color: #A1A6BB;
    padding: 40rpx 34rpx;
    background: #ffffff;
  }
  .charts-box{
    background: #ffffff;
  }
}
.basic-info {
  margin-top: 30rpx;
  .basic-info-content{
    padding: 20rpx 32rpx;
    background-color: #fff;
    border-bottom: 1rpx solid #E5E5E5;
    .info-time{
      font-size: 34rpx;
    }
    .form-item-box{
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 30rpx;
      color: #999999;
      padding: 19rpx 0;
    }
  }
}

.charts-box {
  width: 100%;
  height: 300px;
}
</style>
